<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <script src="/zip.js"></script>
    <script src="/jquery.js"></script>
    <script th:inline="javascript">
    async function download(){
        window.index = 0;
        document.body.onclick = function(){
            let x = event.offsetX;
            let width = document.body.clientWidth;
            if(x < width/2){
                window.index--;
            }else{
                window.index++;
            }
            if(window.index < 0){
                window.index = 0;
            }
            document.getElementById("img" + window.index).scrollIntoView();
        }
        let ajaxPromise = new Promise((resolve, reject) => {
            let url = "/download?path=";
            url = url + encodeURIComponent([[${path}]]);
            let xhr = new XMLHttpRequest();
            xhr.open("get",url,true);
            xhr.responseType = "blob";
            xhr.send();
            xhr.onload = () => {
                resolve(xhr.response);
            }
        });

        let response = await ajaxPromise;
        let zipReader = new zip.ZipReader(new zip.BlobReader(response));
        let arr = await zipReader.getEntries();
        for(let i = 0 ; i < arr.length ; i++){
            let entry = arr[i];
            if(entry.directory){
                continue;
            }
            let text = await entry.getData(new zip.Data64URIWriter('image/jpeg'));
            $("#img").append($("<img/>").attr('src',text).attr('id','img' + i)).append($("<br/>"));
        }

    }
    </script>
    <style>
        body {
            text-align: center;
            background-color: black;
        }
        div {
            margin: 0 auto;
            background-color: black;
        }
        div img{
            background-size:contain|cover;
            width:75%;
            height: auto;
            margin-top: 100px;
        }
    </style>
</head>
<body onload="download()">
<br>
<br>
<br>
<div id="img"/>
</body>
</html>